<template>
  <div>
    <div style="display: flex;justify-content: space-between">
      <el-button type="primary" size="small" icon="el-icon-plus" @click="showAddSalaryView()">添加工资账套</el-button>
      <el-button type="success" size="small" icon="el-icon-refresh" @click="initSalaries()"></el-button>
    </div>
    <el-table :data="salaries" border stripe class="tw-mt-2">
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column prop="name" label="账套名称" width="130"></el-table-column>
      <el-table-column prop="basicSalary" label="基本工资" width="85"></el-table-column>
      <el-table-column prop="trafficSalary" label="交通补助" width="85"></el-table-column>
      <el-table-column prop="lunchSalary" label="午餐补助" width="85"></el-table-column>
      <el-table-column prop="bonus" label="奖金" width="85"></el-table-column>
      <el-table-column prop="createDate" label="启用时间" width="130"></el-table-column>
      <el-table-column label="养老金" align="center">
        <el-table-column prop="pensionPer" label="比率" width="75"></el-table-column>
        <el-table-column prop="pensionBase" label="基数" width="75">
        </el-table-column>
      </el-table-column>
      <el-table-column label="医疗保险" align="center">
        <el-table-column prop="medicalPer" label="比率" width="75">
        </el-table-column>
        <el-table-column prop="medicalBase" label="基数" width="75">
        </el-table-column>
      </el-table-column>
      <el-table-column label="公积金" align="center">
        <el-table-column prop="accumulationFundPer" label="比率" width="75">
        </el-table-column>
        <el-table-column prop="accumulationFundBase" label="基数" width="75">
        </el-table-column>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scoped">
          <div class="tw-flex tw-justify-around">
            <el-button type="primary" size="mini" @click="showEditSalary(scoped.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="deleteSalary(scoped.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--  添加工资账套对话框  -->
    <el-dialog :title="salaryTitle" :visible.sync="dialogVisible" width="40%">
      <div class="tw-flex tw-items-center tw-justify-around">
        <el-steps direction="vertical" :active="activeTitle" :space="50">
          <el-step :title="item" v-for="(item,index) in salariesTitle" :key="index"></el-step>
        </el-steps>
        <el-input style="width: 50%" v-for="(v,k,index) in salary" :key="index" v-model="salary[k]" :ref="'salary'+index"
                  :placeholder="`请输入${salariesTitle[activeTitle]}`" v-show="activeTitle === index"
                  @keypress.enter.native="nextStep"
        >
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetStep" type="danger">重填</el-button>
        <el-button @click="preStep">{{ activeTitle > 0 ? '上一步' : '取消' }}</el-button>
        <el-button type="primary" @click="nextStep">
          {{ activeTitle === salariesTitle.length - 1 ? '完成' : '下一步' }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "SalSob",
  methods: {
    resetStep() {
      this.activeTitle = 0
      this.salary = {
        name: '',
        basicSalary: null,
        trafficSalary: null,
        lunchSalary: null,
        bonus: null,
        pensionPer: null,
        pensionBase: null,
        medicalPer: null,
        medicalBase: null,
        accumulationFundPer: null,
        accumulationFundBase: null,
      }
    },
    preStep() {
      if (this.activeTitle > 0) {
        this.activeTitle -= 1
        this.$nextTick(()=>{
          this.$refs[`salary` + this.activeTitle][0].focus()
        })
        return
      }
      this.dialogVisible = false
    },
    nextStep() {
      if (this.activeTitle >= this.salariesTitle.length - 1) {
        if(this.salary.id){
          this.putRequest(this.api.salary,this.salary).then(res => {
            if(res){
              this.dialogVisible = false;
              this.initSalaries();
              this.resetStep()
            }
          })
        }else {
          this.postRequest(this.api.salary, this.salary).then(res => {
            if (res) {
              this.dialogVisible = false
              this.initSalaries()
              this.resetStep()
            }
          })
        }
      } else {
        this.activeTitle += 1
        this.$nextTick(()=>{
          this.$refs[`salary` + this.activeTitle][0].focus()
        })
      }
    },
    deleteSalary(salary) {
      this.commonUtil.oneConfirmDialog(salary.name,() => {
        this.deleteRequest(this.api.salary + salary.id).then(res => {
          if (res) {
            this.initSalaries()
          }
        })
      })
    },
    showEditSalary(data) {
        this.salaryTitle = "编辑工资账套";
        this.salary.id  = data.id;
        this.salary.name  = data.name;
        this.salary.basicSalary  = data.basicSalary;
        this.salary.trafficSalary  = data.trafficSalary;
        this.salary.lunchSalary  = data.lunchSalary;
        this.salary.bonus  = data.bonus;
        this.salary.pensionPer  = data.pensionPer;
        this.salary.pensionBase  = data.pensionBase;
        this.salary.medicalPer  = data.medicalPer;
        this.salary.medicalBase  = data.medicalBase;
        this.salary.accumulationFundPer  = data.accumulationFundPer;
        this.salary.accumulationFundBase  = data.accumulationFundBase;
        this.activeTitle = 0;
        this.dialogVisible = true;
    },
    showAddSalaryView() {
      this.salaryTitle = '添加工资账套';
      this.salary.id = null;
      this.activeTitle = 0;
      this.dialogVisible = true
    },
    initSalaries() {
      this.getRequest(this.api.salary).then(res => {
        if (res) {
          this.salaries = res.data
        }
      })
    }
  },
  data() {
    return {
      testShow:false,
      activeTitle: 0,
      salary: {
        name: '',
        basicSalary: null,
        trafficSalary: null,
        lunchSalary: null,
        bonus: null,
        pensionPer: null,
        pensionBase: null,
        medicalPer: null,
        medicalBase: null,
        accumulationFundPer: null,
        accumulationFundBase: null,
      },
      salariesTitle: [
        '账套名称',
        '基本工资',
        '交通补助',
        '午餐补助',
        '奖金',
        '养老金比率',
        '养老金基数',
        '医疗保险比率',
        '医疗保险基数',
        '公积金比率',
        '公积金基数',
      ],
      dialogVisible: false,
      salaryTitle: '',
      salaries: []
    }
  },
  mounted() {
    this.initSalaries()
  }
}
</script>

<style scoped>

</style>